<template>
    <div style="width:500px;" :style="{height:ws.wh-64+'px'}" class="flex-no-zoom pr-6 position-relative">
        <div class="position-absolute" style="right:10px;top:12px;z-index: 1">
            <!--0收费站，1服务区-->
            <div class="serviceAreaBox" :class="{active:gateActives[1]}" @click="gatesBtn(1)"></div>
            <div class="tollGateBox" :class="{active:gateActives[0]}" @click="gatesBtn(0)"></div>
        </div>

        <div class="position-absolute bg-white border" v-if="type == 'position' && timeInfo&&timeInfo.length>0"
             style="bottom:2px;z-index: 1;height:40px;width:478px;left: 8px;">


            <div class="d-flex position-relative" style="z-index: 2;margin-top:6px;">
                <div class="w-100 d-flex flex-column align-items-center" v-for="(item,i) in timeInfo"
                     :key="i" @click="checkDetai(item)">
                    <div class="">

                        <div class="bg-white flexCenterCenter" v-if="i==0||i==8||i==16||i==23"
                             style="width:12px;height:12px;border:1px solid #eee;border-radius: 100px;">
                            <div class="timeHH" :style="{backgroundColor:riskLevelColors[item.riskLevel]}"
                                 style="width:6px;height:6px;border-radius: 100px;"></div>
                        </div>

                        <div v-else class="mt-2 timeHH" :style="{backgroundColor:riskLevelColors[item.riskLevel]}"
                             style="width:4px;height: 8px;border-radius: 100px"></div>
                    </div>

                    <div class="text-size-12" style="height: 18px;">
                        {{(i==0||i==8||i==16||i==23)?item.hH:''}}
                    </div>
                </div>
            </div>

            <div class=" position-absolute w-100" style="height:3px;top:10px;padding:0 10px;">
                <div style="height:100%;background-color: #c9cdcf"></div>
            </div>

        </div>
        <div class="partBgBox my-6 w-100" style="height: 100%" id="map">

        </div>
    </div>

</template>

<script>
    import {getDeptGX, getTimeLineInfors, getTollGate} from "../../common/api";
    import {GetCenterPoint, isEmptyObject} from "../../utils/js-utils";
    import {jcolors, riskLevelColors} from "../../common/data/sys-data";

    export default {
        name: "deployment-map",
        props: {
            searchParams: {
                default: () => {
                }
            }, postInfor: {
                default: () => {
                }
            }, type: {
                default: () => {
                }
            }, //position  police
        },
        watch: {
            searchParams: {
                deep: false,  // 深度监听
                handler(newVal, oldVal) {
                    console.log('deployment-map');
                    console.log(newVal)
                }
            },
            postInfor: { //查看布岗详情
                deep: false,  // 深度监听
                handler(newVal, oldVal) {  //positionType 1巡逻岗 2点岗
                    console.log('deployment-map   watch  ----  ');
                    console.log(newVal);


                    if (oldVal && !isEmptyObject(oldVal)) {
                        this.cleanMapDraw();
                        this.cleanTimeDetailDraws();
                        this.timeInfo = [];
                    }
                    if (!newVal || isEmptyObject(newVal)) {
                        //清楚坐标
                        return;
                    }

                    if (newVal.type == 1) { // 巡逻岗线
                        this.drawPosition1(newVal.lstTake)
                    } else if (newVal.type == 2) { // 点岗
                        this.drawPosition2(newVal.lstTake)
                    }

                    this.getTimeLineInfors(newVal.id);

                    // var startTime = newVal.startTime;
                    // var endTime = newVal.endTime;
                }
            }
        },
        data() {
            return {
                timeInfo: [],
                mapApp: null,
                gateActives: [false, false],

                mapDraws: [],
                timeDetailDraws:[],

                gates: [[], []],

                riskLevelColors:riskLevelColors,

                // mapDrawWay:null,
            }
        },
        computed: {
            ws() {
                return this.$store.state.ws
            },
        },
        methods: {
            mapInitFun() {
                this.mapApp = new HiMap(document.getElementById("map"));
                this.getDeptGX();
                // console.log("HiMapConfig")
                // console.log(HiMapConfig)
                // console.log(HiMapConfig.HOSTNAME)
                // console.log(Tools)

            },

            selectRange(item, selectWay, callback) {
                console.log(item);
                console.log(selectWay);
                var polyline = null
                if (selectWay.range) {
                    const getCenterPoint = new GetCenterPoint();
                    getCenterPoint.addL(selectWay.range)
                    var polylineObj = {strcoords: selectWay.range, color: "#ff1200", opacity: 0.5}
                    polyline = this.mapApp.showPolyline(polylineObj);
                    this.mapApp.moveTo(getCenterPoint.getCenter());

                }
                this.mapApp.getPolygonPos(window, (c) => {
                    if (polyline) {
                        this.mapApp.removeOverlay(polyline);
                    }
                    callback(c)
                });
            },


            gatesBtn(type) { //标注服务区和收费站
                this.gateActives[type] = !this.gateActives[type];
                // console.log(this.gateActives)
                if (this.gateActives[type]) { //画
                    this.drawTollGate(type)
                } else { //清除
                    this.clearGate(type)
                }
                this.$forceUpdate()
            },

            tollGateBtn() {
                this.tollGateActive = !this.tollGateActive;
            },

            getTimeLineInfors(id) {
                getTimeLineInfors(id).then(res => {
                    if (res.isSuccess) {

                        this.timeInfo = res.data;
                    }
                })
            },

            drawTollGate(type) { //绘制 0收费站，1服务区
                var reqbody = {nlevel: 3, type: type};
                getTollGate(reqbody).then(res => {
                    // console.log(res);
                    if (res.isSuccess) {
                        var datas = res.data;
                        const getCenterPoint = new GetCenterPoint();
                        datas.forEach((v) => {
                            var iconImg = null;
                            if (type) {
                                iconImg = require('../../assets/img/map/server.png')
                            } else {
                                iconImg = require('../../assets/img/map/gate-open.png')
                            }
                            getCenterPoint.addP(v.coordinate);
                            var monitor = this.mapApp.showMonitor({
                                width: 46,
                                height: 46,
                                strcoords: v.coordinate,
                                title: v.name,
                                imgurl: iconImg,
                            });
                            this.gates[type].push(monitor)
                        });
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })
            },
            drawPosition1(datas) { //绘制执勤路段
                console.log("绘制巡逻岗！！！");
                const getCenterPoint = new GetCenterPoint();
                datas.forEach((v) => {
                    getCenterPoint.addL(v.range);
                    var polylineObj = {strcoords: v.range, color: "#0044ff"};
                    var polyline = this.mapApp.showPolyline(polylineObj);
                    this.mapDraws.push(polyline);

                });
                this.mapApp.moveTo(getCenterPoint.getCenter());
            },
            drawPosition2(datas) {//绘制点
                console.log("绘制点岗！！！");
                const getCenterPoint = new GetCenterPoint();
                datas.forEach((v) => {
                    var lenArray = v.range.split(",");
                    lenArray.pop();
                    getCenterPoint.addP(lenArray.join(","));

                    var polylineObj = {strcoords: v.range, fillcolor: "#0044ff", weight: 1};
                    var tempCircle = this.mapApp.showCircle(polylineObj);
                    this.mapDraws.push(tempCircle)
                });
                this.mapApp.moveTo(getCenterPoint.getCenter());
            },
            clearGate(type) {
                this.gates[type].forEach((v) => {
                    this.mapApp.removeMonitor(v);
                });
                this.gates[type] = [];
            },
            cleanMapDraw() { //0点 1线
                if (this.mapDraws.length == 0) {
                    return;
                }
                this.mapDraws.forEach((v) => {
                    this.mapApp.removeOverlay(v);
                })

                this.mapDraws = [];
            },
            cleanTimeDetailDraws() { //0点 1线
                if (this.timeDetailDraws.length == 0) {
                    return;
                }
                this.timeDetailDraws.forEach((v) => {
                    this.mapApp.removeOverlay(v);
                })

                this.timeDetailDraws = [];
            },
            getDeptGX() {
                getDeptGX().then(res=>{
                    if(res.isSuccess){
                        const getCenterPoint = new GetCenterPoint();
                        res.data.forEach((v) => {
                            getCenterPoint.addL(v.range);
                            var PolygonObj = {
                                weight: 2,
                                fillcolor: jcolors[v.color],
                                infohtml: v.shortName,
                            };
                            PolygonObj.strcoords = v.range;
                            // var tempPolygon =
                            this.mapApp.showPolygon(PolygonObj);
                            // this.mapDraws.push(tempPolygon)
                        })
                        this.mapApp.moveTo(getCenterPoint.getCenter());
                    }
                })

            },
            checkDetai(item){
                this.cleanTimeDetailDraws();
                const getCenterPoint = new GetCenterPoint();
                item.lstMap.forEach((v) => {
                    getCenterPoint.addL(v.range);
                    var polylineObj = {strcoords: v.range, color:this.riskLevelColors[v.riskLevel]};
                    var polyline = this.mapApp.showPolyline(polylineObj);
                    this.timeDetailDraws.push(polyline);

                });
                this.mapApp.moveTo(getCenterPoint.getCenter());
            },


        },
        mounted() {

            if (this.$store.state.isMapReady) {
                this.mapInitFun();
            } else {
                this.$store.subscribe((mutation, state) => {
                    if (mutation.type == 'isMapReady' && mutation.payload) {
                        this.mapInitFun();
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .timeHH{
        cursor:pointer;
        transform: scale(1);
        transition: all 0.3s;
    }
    .timeHH:hover{
       transform: scale(3);
        transition: all 0.3s;
    }

</style>
